<template>
	<u-popup v-model="internalShow" mode="bottom" :mask-close-able="true" border-radius="20">
		<view class="popup-wrapper">
			<view style="height: 25rpx;"></view>
			<u-search bgColor='#fff' placeholder="病史名称搜索" v-model="searchKey" :show-action="false"></u-search>
			<view class="select-info">选中的内容：{{ getMedHistory }}</view>
			<scroll-view class="list-scroll" scroll-y>
				<view class="list">
					<view class="list-item" v-for="(item, index) in filterMedicalList" :key="item.id"
						@click="onItem(item)">
						<view class="name">{{ item.medicalName }}</view>
						<view class="status">
							<view v-if="!item.selected" class="circle"></view>
							<!-- <u-icon  name="checkmark-circle" size="35" color="#ff790f"></u-icon> -->
							<u-icon v-else name="checkmark-circle-fill" size="35" color="#ff790f"></u-icon>
						</view>
					</view>
				</view>
				<view v-if="loading" class="tip">正在加载。。。</view>
				<view v-else-if="filterMedicalList.length == 0 && noMoreData" class="tip">暂无数据</view>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
	import StorageUtils from "@/utils/StorageUtils";
	import CacheConfig from '@/config/CacheConfig.js';
	import * as UserApi from "@/api/user";

	export default {
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			list: {
				type: Array,
				default: () => [],
			},
			value: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				internalShow: false,
				searchKey: '',
				medicalList: [],
				page: 1,
				pageSize: 10,
				loading: false,
				noMoreData: false,
			}
		},
		computed: {
			combinedVars() {
				return {
					list: this.list,
					value: this.value
				}
			},
			filterMedicalList() {
				if (this.searchKey) {
					return this.medicalList.filter(v => v.medicalName.includes(this.searchKey));
				} else {
					return this.medicalList;
				}
			},
			getMedHistory() {
				const arr = this.medicalList.filter(v => v.selected).map(v => v.medicalName);
				return arr.join(",");
			}
		},
		watch: {
			show: {
				handler(newVal) {
					this.internalShow = newVal;
				},
				immediate: true,
				deep: true,
			},
			internalShow: {
				handler(newVal) {
					this.$emit("updateShow", newVal);
				},
				immediate: true,
				deep: true,
			},
			combinedVars: {
				handler({list, value}) {
					this.medicalList = [];
					const arr = value.split(",").map(v => Number(v));
					// console.log("arr", arr);
					list.forEach(v => {
						this.medicalList.push({
							...v,
							selected: arr.includes(v.id),
						});
					});
				},
				immediate: true,
				deep: true,
			}
		},
		methods: {
			onItem(item) {
				const index = this.medicalList.findIndex(v => v.id == item.id);
				if (index != -1) {
					this.medicalList[index].selected = !this.medicalList[index].selected;
				}
				const arr = this.medicalList.filter(v => v.selected);
				this.$emit("change", JSON.parse(JSON.stringify(arr)));
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-wrapper {
		width: 100%;
		height: 670rpx;
		border-radius: 20rpx;
		background-color: #f1f1f1;
		padding: 0 25rpx;
		box-sizing: border-box;
		
		.select-info {
			width: 700rpx;
			height: 55rpx;
			padding-top: 15rpx;
			box-sizing: border-box;
			font-size: 24;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.list-scroll {
			height: calc(100% - 130rpx - 55rpx);
			margin-top: 20rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
		}

		.list {

			.list-item {
				width: 100%;
				height: 95rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #ccc;

				.name {
					flex: 1;
					font-size: 24rpx;
					font-weight: bold;
					color: #010101;
					margin-left: 30rpx;
				}

				.status {
					margin-right: 30rpx;

					.circle {
						width: 30rpx;
						height: 30rpx;
						border-radius: 100%;
						border: 2rpx solid #ff790f;
					}
				}
			}
		}

		.tip {
			text-align: center;
			font-size: 24rpx;
			padding: 10rpx;
		}
	}
</style>